<template>
    <div class="articleDetail-contain">
        <div class="head">
            <el-page-header @back="goBack">
            </el-page-header>
        </div>
        <div class="main-body">
            <div class="main-left">
                <!-- 文章内容区域 -->
                <div class="article-contain">
                    <el-card>
                        <el-descriptions :colon="false" :title=articleList.title :column="2">
                            <el-descriptions-item label="发布时间:">{{ articleList.publish_date }}</el-descriptions-item>
                            <el-descriptions-item style="width: 50%;" label="文章类型:">
                                {{ articleList.category_name }}</el-descriptions-item>
                            <el-descriptions-item>
                                <el-input type="textarea" placeholder="内容为空" readonly v-model="articleList.content"
                                    maxlength="10000">
                                </el-input>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </div>
                <div>
                    <el-card>
                        <div class="icon-wrapper">
                            <span style="margin-right: 5%; font-size: 28px;"
                                :class="isLike ? 'iconfont icon-dianzan_kuai' : 'iconfont icon-dianzan'"
                                @click="addLike()"></span>
                            <span style="margin-right: 10px; font-size: 28px;"
                                :class="isFavorite ? 'el-icon-star-on' : 'el-icon-star-off'"
                                @click=addMyFavorite()></span>
                        </div>
                    </el-card>
                </div>
                <!-- 调用 评论 组件，并传递 articleID 属性 -->
                <Comment :articleID="$route.query.articleID" />
            </div>
            <div class="main-right">
                <!-- 作者列表 -->
                <el-card>
                    <span style="margin-top: 0;display: flex;">
                        <i><img v-if="authorList.avatar" :src="authorList.avatar" class="avatar">
                            <i v-else class="el-icon-user"
                                style="font-size: 40px;border:1px solid #ccc;border-radius: 50%;"></i>
                        </i>
                        <i
                            style="display: flex; align-items: center; cursor: pointer; margin-left: 10px; color: #409EFF;">{{
                authorList.nickname }}</i>
                        <i style="display: flex; align-items: center; margin-left: 10px;font-size: small;">
                            <el-button :type="buttonType"
                                style="padding:3px 0;font-size: 10px; color: black;border: 1px solid black;width: 50px;border-radius: 10px;"
                                @click="FollowButton(articleList.authorID)">{{ FollowWord }}</el-button></i>
                    </span>
                    <span style="margin-top: 0;display: flex;font-size: small;">
                        <i style="margin:20px;">获赞<p>{{ authorList.likesNum }}</p></i>
                        <i style="margin:20px;">文章<p>{{ authorList.articlesNum }}</p></i>
                        <i style="margin:20px;">粉丝<p>{{ authorList.fansNum }}</p></i>
                    </span>

                </el-card>
                <!-- 推荐列表 -->
                <el-card>
                    <span style="margin: 0px; margin-bottom: 14px;display: flex; justify-content: space-between;">
                        <p style="margin: 0; font-size: 18px;font-weight: bolder;">相关推荐</p>
                    </span>
                    <!-- 分割线 -->
                    <el-divider></el-divider>
                    <div v-for="item in randomCategoryList" :key="item.id">
                        <!-- 文章内容区域 -->
                        <div style="display: flex;">
                            <!-- 文字区域 -->
                            <div style="width: auto;">
                                <el-descriptions :colon="false" direction="vertical" :column="1">
                                    <el-descriptions-item>
                                        <p @click="reFlash(item.id)"
                                            style="font-weight:bold;margin: 0px; font-size: 12px; cursor: pointer;">
                                            {{ item.title }}
                                        </p>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <p @click="reFlash(item.id)"
                                            style="margin: 0px;padding-bottom: 10px; font-size: 10px;cursor: pointer;">
                                            {{ item.content }}
                                        </p>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </div>
                        <!-- 分割线 -->
                        <el-divider></el-divider>
                    </div>
                </el-card>
            </div>
        </div>

    </div>
</template>

<script>
import Comment from '@/components/Comment'
import { addMyFollowAPI, deleteMyFollowAPI, findFollowAPI } from '@/api/myFollow'
import { addMyFavoriteAPI, deleteMyFavoriteAPI, findFavoriteAPI } from '@/api/myFavorite'
import { addMyLikeAPI, deleteMyLikeAPI, findLikeAPI } from '@/api/myLike'
import { getArticleDetailAPI, getRandomArticleListAPI, getAuthorDetailAPI } from '@/api/public'
export default {
    components: {
        Comment
    },
    data() {
        return {
            isLike: false,//点赞的状态
            isFavorite: false,//收藏的状态
            isFollow: true,//关注按钮的状态
            buttonType: 'text',//关注按钮的类型
            FollowWord: '已关注',//关注按钮的文字
            articleID: '',//文章id
            articleList: [],//文章详情列表
            article: {//文章详情参数
                articleID: '',
                title: '',
                content: '',
                publish_date: '',
                category_name: '',
                picture: '',
            },
            comments: [],//评论列表
            commentsTotal: 0,//评论总数
            authorList: [],//作者信息
            num: 5,//随机推荐列表数量
            randomCategoryList: [],//随机推荐列表
        }
    },
    mounted() {
        // 获取传入的文章id,以及调用接口获取页面数据
        this.articleID = this.$route.query.articleID
        this.getArticleDetail()
        this.getRandomArticleList()
    },
    methods: {
        // 判断点赞、收藏、关注状态
        async getStatus() {
            // 判断是否关注
            const res1 = await findFollowAPI(this.articleList.authorID)
            if (res1.data === "yes") {
                this.isFollow = true
            } else {
                this.isFollow = false
            }
            this.FollowWord = this.isFollow ? '已关注' : '关注';
            this.buttonType = this.isFollow ? 'text' : 'primary';
            // 判断是否点赞
            const res2 = await findLikeAPI(this.articleID)
            if (res2.data === "yes") {
                this.isLike = true
            } else {
                this.isLike = false
            }
            //判断是否收藏
            const res = await findFavoriteAPI(this.articleID)
            if (res.data === "yes") {
                this.isFavorite = true
            } else {
                this.isFavorite = false
            }

        },
        // 切换收藏样式
        async addMyFavorite() {
            this.isFavorite = !this.isFavorite
            if (this.isFavorite) {
                await addMyFavoriteAPI(this.articleID)
                this.$message.success('收藏成功')
            } else {
                await deleteMyFavoriteAPI(this.articleID)
                this.$message.error('已取消')
            }
            this.getUserDetail()
        },
        //切换点赞样式
        async addLike() {
            this.isLike = !this.isLike
            if (this.isLike) {
                await addMyLikeAPI(this.articleID)
                this.$message.success('点赞成功')
            } else {
                await deleteMyLikeAPI(this.articleID)
                this.$message.error('已取消')
            }
            this.getUserDetail()
        },
        // 切换关注样式
        async FollowButton(id) {
            this.isFollow = !this.isFollow;
            this.FollowWord = this.isFollow ? '已关注' : '关注';
            this.buttonType = this.isFollow ? 'text' : 'primary';
            if (this.FollowWord === '已关注') {
                const res = await addMyFollowAPI(id)
                if (res.code == '200') {
                    this.$message.success('关注成功')
                    this.getUserDetail()
                }
            } else {
                const res = await deleteMyFollowAPI(id)
                if (res.code == '200') {
                    this.$message.error('已取消关注')
                    this.getUserDetail()
                }
            }
        },
        // 重新获取文章详情
        reFlash(articleID) {
            this.articleID = articleID
            this.getArticleDetail()
            this.getRandomArticleList()
        },
        //获取随机推荐文章列表
        async getRandomArticleList() {
            const res3 = await getRandomArticleListAPI(this.num)
            this.randomCategoryList = res3.data
        },
        //获取文章、用户详情
        async getArticleDetail() {
            const res = await getArticleDetailAPI(this.articleID)
            this.articleList = res.data[0]
            this.title = res.data[0].title
            this.content = res.data[0].content
            this.publish_date = res.data[0].publish_date
            this.category_name = res.data[0].category_name
            this.getUserDetail()
            this.getStatus()
        },
        // 获取用户信息
        async getUserDetail() {
            const res1 = await getAuthorDetailAPI(this.articleID)
            this.authorList = res1.data[0]
        },
        //返回上一页
        goBack() {
            if (this.$route.path !== '/articleDetail') {
                // 如果不是目标路由，则执行导航操作
                this.$router.back();
            } else {
                // 如果当前路由已经是目标路由，则往前推，到不是当前页面路游
                this.$router.go(-1);
            }
        },
    }
}
</script>

<style>
.main-body {
    display: flex;
    margin: 10px;
}

.main-left {
    width: 80%;
    margin-right: 20px;
    justify-content: left;

    .article-contain {

        .el-textarea__inner {
            min-height: 410px !important;
            overflow-y: auto;
            border: none;
            padding: 5px;
        }

        .el-textarea__inner::-webkit-scrollbar {
            width: 7px;
            /* 滚动条宽度 */
        }

        .el-textarea__inner::-webkit-scrollbar-thumb {
            background-color: #ccc;
            /* 滚动条 thumb 背景色 */
            border-radius: 5px;
            /* 滚动条 thumb 圆角 */
            cursor: pointer;
            /* 鼠标指针样式为手指 */
        }

        .el-card__body,
        .el-main {
            padding-right: 0px;
            padding-bottom: 0px;
        }
    }
}

.main-right {
    height: 300px;
    width: 250px;

    .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
        max-width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
        padding-bottom: 3px;
    }

    .el-divider--horizontal {
        margin: -5px 0 !important;
    }

    .el-card {
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .right-contain {
        margin-left: 10px;
        width: 20%;
        min-width: 250px;
    }

    .avatar {
        cursor: pointer;
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

}
</style>
